<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="../template/_head.jsp" flush="true" />
<body>
<!--头部-->
<%@ include  file="../template/_header.jsp"%>
<!--头部-->
<!--正文	 start-->
<div class="myTeam">
    <div data-am-widget="tabs" class="am-tabs am-tabs-default  mpy-tabs" data-am-tabs-noswipe="1">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active tabs-item"><a href="javascript:;">全部</a></li>
            <li class=" tabs-item"><a href="javascript:;">一级音乐者</a></li>
            <li class="tabs-item"><a href="javascript:;">二级音乐者</a></li>
            <li class="tabs-item"><a href="javascript:;">三级音乐者</a></li>
        </ul>
    </div>
    <div id="wrapper" data-am-widget="list_news"
         class="am-list-news am-list-news-default">
        <div class="am-list-news-bd">
            <div class="pull-action loading" id="pull-down">
        <span class="am-icon-arrow-down pull-label"
              id="pull-down-label"> 下拉刷新</span>
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
            <ul class="am-list" id="events-list">
                <li class="am-list-item-desced">
                    <div class="am-list-item-text">
                        正在加载内容...
                    </div>
                </li>
            </ul>
            <div class="pull-action" id="pull-up">
        <span class="am-icon-arrow-down pull-label"
              id="pull-up-label"> 上拉加载更多</span>
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/x-handlebars-template" id="tpi-list-item">
    {{#each this}}
    <li class="am-list-item-desced" data-id="{{id}}">
        <a href="{{alt}}" class="am-list-item-hd" target="_blank">{{title}}</a>

        <div class="am-list-item-text">{{content}}</div>
    </li>
    {{/each}}
</script>
<script>
    var myEventsList=(function($) {
        var EventsList = function(element, options) {
            var $main = $('#wrapper');
            var $list = $main.find('#events-list');
            var $pullDown = $main.find('#pull-down');
            var $pullDownLabel = $main.find('#pull-down-label');
            var $pullUp = $main.find('#pull-up');
            var topOffset = -$pullDown.outerHeight();

            this.compiler = Handlebars.compile($('#tpi-list-item').html());
            this.prev = this.next = this.start = options.params.start;
            this.total = null;

            this.getURL = function(params) {
                var queries = ['callback=?'];
                for (var key in  params) {
                    if (key !== 'start') {
                        queries.push(key + '=' + params[key]);
                    }
                }
                queries.push('start=');
                return options.api + '?' + queries.join('&');
            };


            this.renderList = function(start, type) {
                var _this = this;
                var $el = $pullDown;

                if (type === 'load') {
                    $el = $pullUp;
                }

                $.getJSON(this.URL + start).then(function(data) {
                    console.log(data);
                    _this.total = data.total;

                    var html = _this.compiler(data.events);
                    if (type === 'refresh') {
                        $list.children('li').first().before(html);
                    } else if (type === 'load') {
                        $list.append(html);
                    } else {
                        $list.html(html);
                    }

                    // refresh iScroll
                    setTimeout(function() {
                        _this.iScroll.refresh();
                    }, 100);
                }, function() {
                    console.log('Error...')
                }).always(function() {
                    _this.resetLoading($el);
                    if (type !== 'load') {
                        _this.iScroll.scrollTo(0, topOffset, 800, $.AMUI.iScroll.utils.circular);
                    }
                });
            };

            this.setLoading = function($el) {
                $el.addClass('loading');
            };

            this.resetLoading = function($el) {
                $el.removeClass('loading');
            };

            this.init = function() {
                var myScroll = this.iScroll = new $.AMUI.iScroll('#wrapper', {
                    click: true
                });
                // myScroll.scrollTo(0, topOffset);
                var _this = this;
                var pullFormTop = false;
                var pullStart;

                this.URL = this.getURL(options.params);
                this.renderList(options.params.start);

                myScroll.on('scrollStart', function() {
                    if (this.y >= topOffset) {
                        pullFormTop = true;
                    }

                    pullStart = this.y;
                    // console.log(this);
                });

                myScroll.on('scrollEnd', function() {
                    if (pullFormTop && this.directionY === -1) {
                        _this.handlePullDown();
                    }
                    pullFormTop = false;

                    // pull up to load more
                    if (pullStart === this.y && (this.directionY === 1)) {
                        _this.handlePullUp();
                    }
                });
            };

            this.handlePullDown = function() {
                console.log('handle pull down');
                if (this.prev > 0) {
                    this.setLoading($pullDown);
                    this.prev -= options.params.count;
                    this.renderList(this.prev, 'refresh');
                } else {
                    console.log('别刷了，没有了');
                }
            };

            this.handlePullUp = function() {
                console.log('handle pull up');
                if (this.next < this.total) {
                    this.setLoading($pullUp);
                    this.next += options.params.count;
                    this.renderList(this.next, 'load');
                } else {
                    console.log(this.next);
                    // this.iScroll.scrollTo(0, topOffset);
                }
            }
        };
        console.log(EventsList);
        return EventsList;
        /*
         $(function() {
         var app = new EventsList(null, {
         api: 'https://api.douban.com/v2/event/list',
         params: {
         start: 100,
         type: 'music',
         count: 10,
         loc: 'beijing'
         }
         });
         app.init();
         });

         document.addEventListener('touchmove', function(e) {
         e.preventDefault();
         }, false);
         */
    })(window.jQuery);

    $(function(){
        var app = new myEventsList(null, {
            api: 'https://api.douban.com/v2/event/list',
            params: {
                start: 100,
                type: 'music',
                count: 10,
                loc: 'beijing'
            }
        });
        app.init();
        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);

    });


</script>
</body>
</html>